<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="105">
          <Collapse value="1">
            <Panel name="1">
              常规配置
              <div slot="content">
                <FormItem label="对齐方式">
                  <Select size="small" v-model="textAlign" >
                    <Option v-for="item in $PnDict.textAligns" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </div>
            </Panel>
            <Panel name="2">
              标题<ShowToggle class="float-right" v-model="title.show"></ShowToggle>
              <div slot="content">
                <FormItem label="是否显示">
                  <i-switch v-model="title.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="显示位置">
                  <Select transfer size="small" v-model="title.location">
                    <Option v-for="item in locations" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="字体大小">
                  <InputNumber size="small" :max="10000" :min="1" v-model="title.fontSize"></InputNumber> px
                </FormItem>
                <FormItem label="字体宽度">
                  <Select transfer size="small" v-model="title.fontWeight">
                    <Option v-for="item in $PnDict.fontWeights" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="颜色">
                  <PnColorPicker size="small" v-model="title.color" alpha recommend/>
                </FormItem>
                <FormItemPanel title="边距">
                  <FormItem label="左">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="title.marginLeft"></InputNumber> px
                  </FormItem>
                  <FormItem label="上">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="title.marginTop"></InputNumber> px
                  </FormItem>
                  <FormItem label="右">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="title.marginRight"></InputNumber> px
                  </FormItem>
                  <FormItem label="下">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="title.marginBottom"></InputNumber> px
                  </FormItem>
                </FormItemPanel>
              </div>
            </Panel>
            <Panel name="3">
              前缀<ShowToggle class="float-right" v-model="prefix.show"></ShowToggle>
              <div slot="content">
                <FormItem label="是否显示">
                  <i-switch v-model="prefix.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>

                <FormItem label="字体大小">
                  <InputNumber size="small" :max="10000" :min="1" v-model="prefix.fontSize"></InputNumber> px
                </FormItem>
                <FormItem label="字体宽度">
                  <Select transfer size="small" v-model="prefix.fontWeight">
                    <Option v-for="item in $PnDict.fontWeights" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="颜色">
                  <PnColorPicker size="small" v-model="prefix.color" alpha recommend/>
                </FormItem>
                <FormItem label="文本">
                  <Input size="small" v-model="prefix.text"/>
                </FormItem>

                <FormItemPanel title="边距">
                  <FormItem label="左">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="prefix.marginLeft"></InputNumber> px
                  </FormItem>
                  <FormItem label="上">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="prefix.marginTop"></InputNumber> px
                  </FormItem>
                  <FormItem label="右">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="prefix.marginRight"></InputNumber> px
                  </FormItem>
                  <FormItem label="下">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="prefix.marginBottom"></InputNumber> px
                  </FormItem>
                </FormItemPanel>
              </div>
            </Panel>
            <Panel name="4">
              后缀<ShowToggle class="float-right" v-model="suffix.show"></ShowToggle>
              <div slot="content">
                <FormItem label="是否显示">
                  <i-switch v-model="suffix.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>

                <FormItem label="字体大小">
                  <InputNumber size="small" :max="10000" :min="1" v-model="suffix.fontSize"></InputNumber> px
                </FormItem>
                <FormItem label="字体宽度">
                  <Select transfer size="small" v-model="suffix.fontWeight">
                    <Option v-for="item in $PnDict.fontWeights" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="颜色">
                  <PnColorPicker size="small" v-model="suffix.color" alpha recommend/>
                </FormItem>
                <FormItem label="文本">
                  <Input size="small" v-model="suffix.text"/>
                </FormItem>

                <FormItemPanel title="边距">
                  <FormItem label="左">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="suffix.marginLeft"></InputNumber> px
                  </FormItem>
                  <FormItem label="上">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="suffix.marginTop"></InputNumber> px
                  </FormItem>
                  <FormItem label="右">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="suffix.marginRight"></InputNumber> px
                  </FormItem>
                  <FormItem label="下">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="suffix.marginBottom"></InputNumber> px
                  </FormItem>
                </FormItemPanel>
              </div>
            </Panel>
            <Panel name="5">
              数字
              <div slot="content">
                <FormItem label="起始值">
                  <InputNumber size="small" :max="10000" :min="0" v-model="count.startValue"></InputNumber>
                </FormItem>
                <FormItem label="自动播放">
                  <i-switch v-model="count.autoPlay">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="动画时长">
                  <InputNumber size="small" :max="10000" :min="1000" :step="1000" v-model="count.duration"></InputNumber> 毫秒
                </FormItem>
                <FormItem label="小数位数">
                  <InputNumber size="small" :max="3" :min="0" :step="1" v-model="count.decimals"></InputNumber> 位小数
                </FormItem>
                <FormItem label="字体大小">
                  <InputNumber size="small" :max="10000" :min="1" v-model="count.fontSize"></InputNumber> px
                </FormItem>
                <FormItem label="字体宽度">
                  <Select transfer size="small" v-model="count.fontWeight">
                    <Option v-for="item in $PnDict.fontWeights" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="颜色">
                  <PnColorPicker size="small" v-model="count.color" alpha recommend/>
                </FormItem>
              </div>
            </Panel>
          </Collapse>
        </Form>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="CountRollComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

        </Container>
      </TabPane>
    </Tabs>

  </div>

</template>

<script>
  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'CountRollCompForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {
        locations: [
          {
            label: '显示在数字上边',
            value: 'top'
          },
          {
            label: '显示在数字下边',
            value: 'bottom'
          },
        ]
      }
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({

        textAlign: 'component.compConfigData.textAlign',
        title: 'component.compConfigData.title',
        prefix: 'component.compConfigData.prefix',
        suffix: 'component.compConfigData.suffix',
        count: 'component.compConfigData.count',

      })
    }
  }
</script>

<style scoped>

</style>
